<template lang="pug">
  .clearfix
    Modal(
      width="400"
      v-model="isShowImportModal"
      title="文件上传"
      class-name="vertical-center-modal"
    )
      Row
        Col.pl-10(span="24")
          Upload(
            ref="upload"
            multiple
            :max-size="10 * 1024"
            :on-exceeded-size="handleMaxSizeTen"
            :before-upload="handleBeforeUploadImport"
            :on-success="uploadSuccessImport"
            :action="baseUrl + '/api/PolicySupport/FileUpload?PSID=' + PSID"
            :show-upload-list="false"
            :headers="headers"
          )
            Button(type="info") 导入
        Col.pl-10(span="24")
          .text-gray-9.pt-10.pb-10 仅支持上传10M以内的文件
        Col.pl-10.pt-10(span="24")
          .clearfix.mb-5(v-for="item of fileList")
            .border-all.pt-3.pb-3.pl-10.pr-10.border-radius-3.display-inline-block
              |{{item.name}}
              Icon.btn-r-close.ml-10.cursor-pointer(type="md-close" @click.native="handleRemove(item)")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmitImport") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: '',

  props: {
    PSID: {
      type: String,
      default: 'local'
    }
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      baseUrl: baseUrl,
      isShowImportModal: false,
      companyId: '',
      companyName: '',
      // file: null,
      fileList: [],
      errorData: {
        errorId: '',
        isError: false,
        downLoadUrl: null
      }
      // PSID: 'local'
    }
  },

  watch: {
  },

  mounted () {
    this.companyId = this.$route.query.companyId
    this.companyName = this.$route.query.companyName
  },

  methods: {
    cancel () {
      this.isShowImportModal = false
      // this.file = null
      this.fileList = []
    },

    // 批量导入-上传前文件
    handleBeforeUploadImport (file, fileList) {
      // this.file = file
      this.fileList.push(file)
      // console.log('file: ', this.file)
      console.log('fileList: ', this.fileList)
      return false
    },

    // 上传成功
    uploadSuccessImport (res, row) {
      console.log('上传成功res: ', res)
      console.log('上传成功row: ', row)
      if (res.code === 200 && res.success) {
        if (res.data) {
          this.isShowImportModal = true
          this.$Message.error('上传有错误，你可以下载错误数据文件')
          this.errorData.isError = true
          this.errorData.downLoadUrl = baseUrl + res.data
        } else {
          this.$Message.success(res.message)
          this.errorData.isError = false
          // this.file = null
          this.fileList = []
          this.isShowImportModal = false
          this.$emit('query')
        }
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 确定导入
    handleSubmitImport () {
      if (this.fileList.length > 0) {
        this.fileList.map(item => {
          this.$refs.upload.post(item)
        })
      } else {
        this.$Message.warning('请选择文件！')
      }
    },

    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    },

    handleRemove (file) {
      const fileList = this.fileList
      this.fileList.splice(fileList.indexOf(file), 1)
    }
  }
}
</script>

<style lang="less" scope>
</style>
